<template>
  <el-pagination
      v-model:page-size="paging.size"
      v-model:current-page="paging.page"
      :total="paging.total"
      :page-sizes="pageSize"
      :layout="layout"
      :pager-count="5"
  />
</template>

<script setup>

import {computed} from "vue";

const props = defineProps({
  paging: {
    type: Object,
    default: {page: 1, size: 15, total: 0}
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  pageSize: {
    type: Array,
    default: [15, 20, 30, 40]
  }
})

const emit = defineEmits(['update:paging'])
const paging = computed({
  get() {
    return props.paging
  },
  set(v) {
    emit('update:paging', v)
  }
})

</script>

<style scoped>

</style>